<template>
  <div class='box'>
    <div class='hua' v-for='(item,index) in arr' :key='index' v-show='id==item.ID'>
      <div>{{item.tit_content}}</div>
      <div>{{item.sub_tit}}</div>
      <div>{{item.sub_tit_con}}</div>
    </div>
    <div v-for='(items,index) in list' :key='index'>
      <div v-for='(aa,index) in items.arr' :key='index' class='moods'>
        <div class="mood">
          <div class="moods_l">
            <img :src='aa.img_src' alt="">
          </div>
            <div class="moods_r">
              <h5>{{aa.img_tit}}</h5>
              <p class="list">{{aa.special_key}}</p>
              <p class="types">{{aa.search_key}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      arr: [],
      id: "",
      list: []
    };
  },
  created() {
    this.id = this.$route.params.id;
    axios
      .get("/api/menu/silderPage")
      .then(res => {
        this.arr = res.data;
      })
      .catch(err => {
        console.log(err);
      });
    axios
      .get("/api/menu/page/" + this.$route.params.id)
      .then(res => {
        this.list = res.data;
      })
      .catch(err => {
        console.log(err);
      });
  }
};
</script>
<style scoped lang='scss'>
.hua {
  width: 92%;
  margin: 0 auto;
  font-size: 14px;
  div {
    margin-top: 10px;
  }
}
.moods {
  width: 100%;
  padding-left: calc(80rem / 67.5);
  box-sizing: border-box;
  .mood {
    width: 100%;
    height: calc(368rem / 67.5);
    padding: calc(40rem / 67.5);
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid #e0e0e0;
    .moods_l {
      width: calc(317rem / 67.5);
      height: calc(317rem / 67.5);
      img {
        width: 100%;
        height: 100%;
      }
    }
    .moods_r {
      width: calc(687rem / 67.5);
      height: calc(317rem / 67.5);
      h5 {
        width: calc(850rem / 67.5);
        height: calc(80rem / 67.5);
        line-height: calc(80rem / 67.5);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: space;
      }
      .list {
        width: calc(850rem / 67.5);
        height: calc(48rem / 67.5);
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: space;
        font-size: 10px;
        color: #aaaaaa;
      }
      .types {
        width: calc(850rem / 67.5);
        height: calc(44rem / 67.5);
        line-height: calc(144rem / 67.5);
        font-size: 10px;
        color: #aaaaaa;
      }
    }
  }
}
</style>


